WordPress now powers 34 percent of all the websites — more than one third of the entire web. While its dominance can’t be ignored, a lot of developers started getting frustrated with the CMS because up until recently it wasn’t possible to incorporate modern code. As a result, WordPress sites started to look a little dated. Gutenberg, WordPress’ much talked about new code editor, aims to change that. It offers a richer user experience and makes WordPress more attractive to developers again because it enables them to code in a way that’s similar to building sites with popular JavaScript frameworks such as React and Vue. Gutenberg significantly changes how we approach content on the web. 

So, to help you get the most out of WordPress, we round up 34 fantastic WordPress tutorials from around the web in this article. We cover the foundations like how to get started with Gutenberg, speed up load time and ensure smart maintenance of your sites. But we also explore plenty of advanced techniques to demonstrate what’s possible in modern web development with WordPress today. This includes using WordPress plugins to create CSS Grid layouts and interactive maps, building fast front-ends with Gatsby.js, and using WordPress as a headless CMS, which offers great flexibility and control to developers. Finally, we also cover internationalisation strategies and how to adapt and open up your sites to new markets.

Let’s dive in!

Gutenberg

Get Started with Gutenberg

For this free ebook, I’ve invited five WordPress experts to explain how to upgrade to WordPress 5, design your first Gutenberg block, jumpstart your Gutenberg designs with SketchPress, and build Gutenberg blocks either with JavaScript or Advanced Custom Fields.  

How to Create Custom Blocks for Gutenberg

Gutenberg has changed the way users create content within WordPress, and the way developers build WordPress plugins and themes. In this tutorial you’re going to learn how you can create custom blocks for Gutenberg.

 

Extending Gutenberg Core Blocks with Custom Attributes and Controls

Extensibility is one of the WordPress features that we love the most. In this article, WordPress specialist Jeffrey Carandang shares some of the lessons he’s learned himself from actively participating on Gutenberg development on GitHub, starting with custom attributes and controls.

Building a WordPress Theme with Gutenberg

A detailed walkthrough of how WordPress developer Bill Erickson builds custom WordPress themes, including custom blocks, archive pages, and modular templates. Also see his many other developer-focused Gutenberg tutorials and his Developer’s Guide to Gutenberg.

Using CSS Custom Properties for Better UX in Frontend and Gutenberg

Allowing users to customise your theme is crucial for adoption, but the usual CSS approach in WordPress is problematic. In this post Felix Arntz looks at a solution that uses Custom Properties to improve the UX for both website visitors and content creators, all at once.

 

Managing WordPress Metadata in Gutenberg Using a Sidebar Plugin

In this article, Ali Alaa discusses metaboxes and metafields in WordPress and specifically covers how to replace the old PHP metaboxes in Gutenberg and extend Gutenberg’s sidebar to add a React component that will be used to manipulate the metadata with the global JavaScript Redux-like stores.

For more on Gutenberg, also see What does ‘Gutenberg-ready’ mean for WordPress themes?, 12 Gutenberg-friendly free WordPress themes, and 8 things your WordPress clients need to know about Gutenberg — all here on the Heart Internet blog. 

Modern WordPress development

How to Approach Modern WordPress Development

This series digs into real WordPress development: writing significant PHP, HTML, CSS, and JavaScript code. Part 1 covers the general workflow and WordPress front-end development, while part 2 is about the PHP of modern WordPress back-end development.

Improving WordPress Code With Modern PHP

A tour of the most relevant PHP features newly-available to WordPress, such as classes, namespaces, traits and closures, and various best practices of how these can be used to build better software.

How to Create a Modern Web App Using WordPress and React

Want the advantages of a modern React single page app, but need a back-end that feels familiar? This article explains how to set up the WordPress REST API, including custom post types and fields, and how to fetch this data inside React.

Crash Course: Headless WordPress with WPGraphQL, ACF, and React

Alex Young, creator of the WPCasts video tutorials site, presents a brief introduction to using WordPress as a headless CMS. The half-hour video tutorial goes over the basics of setting up a bare bones React app that uses WPGraphQL to query ACF data. 

 

Build a Vue.js SPA on Top of Headless WordPress

An experiment in using WordPress as a headless CMS with Vue.js. The tutorials covers creating models with custom fields in WordPress, building a custom endpoint for the WordPress REST API and setting up and hosting a Vue.js single-page app. Also see Gbolade Ogunfowote’s talk on how to integrate Vue with WordPress from the 2019 JavaScript for WordPress Conference.

Plugins

Bringing CSS Grid to WordPress Layouts

This article introduces a plug-in called Grids that creates a bridge between the new block editor in WordPress and CSS Grid. It only takes care of the layout structure and enables you to manually specify dimensions, backgrounds, responsive behaviour — all using visual controls in the block editor.

Designing Complex Responsive Tables In WordPress

Here’s everything you need to know about designing complex tables for your mobile visitors in WordPress. The article explores the kinds of tables you can create, how to build user control into your table and how to use WordPress table plugin wpDataTables.

Creating Interactive Maps in WordPress with MapSVG

Discover how to create feature-rich, interactive maps quickly with the MapSVG plugin. It comes with a smart admin UI and actually gives you five options for creating a new map based on vector, image, or Google Maps features but this article focuses on the SVG features.

Advanced Custom Fields Tutorial: Your Ultimate Guide

Advanced Custom Fields (ACF) is one of the most powerful and popular WordPress plugins. This guide explains why it’s so valuable and how to apply it to your WordPress site. For more on ACF, don’t miss Daniel Schutzsmith’s articles in Heart Internet’s free Design Systems and Get Started with Gutenberg ebooks. 

Performance

The Complete Guide to Optimizing WordPress Site Speed in 2019

This article explores 26 ways a WordPress website can and should be optimised for performance, including hosting, CDNs, caching, minification, Gzip compression, lazy loading, security, more WordPress-specific topics such as themes and plugins, and more.

How to Speed up WordPress Page Loading Time

Another 16 ways to speed up your WordPress site loading time and get the top score of 100 on Google’s PageSpeed Insights, including optimising the WordPress database and activating Autoptimize to aggregate and minify CSS, HTML and JavaScript.

10 Micro Optimisations for a Faster WordPress Website

This article goes further than the generic advice — use smaller images and don’t forget to compress them, avoid too many plugins, leverage browser caching — and covers what we can do to further optimise WordPress websites to boost our speed, improve our responsivity and encourage Google to rank us higher.

Image Optimization In WordPress

This step-by-step guide over at Smashing Magazine will help you learn how to easily optimise all the images on your site (manually or on autopilot using tools such as Optimole, ShortPixel, and Smush) in order to gain better loading times.

Loading Just-in-Time CSS in the Body with WordPress

Inspired by Harry Roberts’ post about CSS and Network Performance, David Greenwald shows us how to set up progressive CSS rendering with WordPress. Also see Nathan Rice’s article on a better way to handle CSS overload, just for Gutenberg blocks, using a similar method.

Blazing Fast WordPress Sites With Gatsby

Learn how to integrate free and open-source React.js-based framework Gatsby.js with WordPress and build a robust and fast front-end. This post explores how to configure a basic project setup and use it to fetch data from a WordPress site. Also check out Porting the Twenty Nineteen WordPress Theme to Gatsby and watch this introductory WordPress and Gatsby talk:

 

Managing WordPress sites

The Web Designer’s Guide to Managing WordPress Sites 

Once a site is built, designers often continue to help their clients manage their WordPress sites, improving the security, reliability, and performance. This article features two web designers and the lessons they’ve learned managing multiple WordPress sites for their clients.

How to activate and configure a WordPress Multisite network

In this post, Rachel McCollin explains exactly what WordPress Multisite is, works through some of its benefits, and shows us how to activate and manage a Multisite network from an existing WordPress installation.

How To Safely Update Your WordPress Site (Ultimate Guide)

Updates can make your site slow down, cause errors or even result in a complete site crash. And if too many updates pile up, it becomes overwhelming to tackle them. But fear not, the BlogVault team jotted down everything you need to know about WordPress Updates.

Changing Permalinks in WordPress Without Blowing Up Your Site 

In this article, you’ll learn everything you need to know about your WordPress site’s permalinks, including why they’re important (spoiler: they help guide users, as well as search engines), their basic structure and how they are created, and how to change your permalinks safely.

10 Tips to Make WordPress Maintenance Smooth

WordPress developer Hassan Jamal outlines 10 essential WordPress maintenance tips that could help you save hours of work and keep your websites up with relative ease, including installing your WordPress site locally, linting and debugging. 

Internationalisation

Internationalization in WordPress 5.0

Pascal Birchler explores the new internationalisation features in WordPress. If you’re building a WordPress plugin or theme and want to make sure it can be fully localized, this post is for you. Also check out Pascal’s talk from the 2019 JavaScript for WordPress Conference, which covers the steps for making your JavaScript code work with WordPress internationalisation.

How to Create a Multilingual WordPress Site [The Complete Guide]

Learn how to create a multilingual WordPress site, which will help you improve SEO and opens you up to a new audience who can browse your site in their preferred languages. This guide explains how to translate 100% of your content by simply clicking on a live version of your site — no special knowledge needed.

A Best Practice Guide for Multilingual WordPress Websites

This article on the site of WordPress translation plugin Weglot covers 11 important best practices you should keep in mind when creating multilingual sites in WordPress, including providing simple language switching options, using dedicated URLs, considering cultural differences, and more. Also see How to Create a Multilingual Site With Themify and Weglot.

How to Use WordPress Geo Location Targeting

Discover how to use WordPress geo location data to personalise websites based on a user’s physical location. This article digs into how geo targeting works, covers two useful plugins, and explains the best practices you need to keep in mind to use it effectively.

For more on WordPress, check out all WordPress content on the Heart Internet blog.